<template>
	<view class="content">
		<view class="user-info">
			<view class="topView">
				<image class="setIcon" src="../../static/universal_back_trans.png" mode="widthFix" @click="toSetting"></image>
			</view>
		</view>
		<view class="Name">{{msgDict.inputCode}}</view>
		<view class="inputPsw">
			<input type="number" :value="pswText" maxlength="4" @input='changePsw'/>
			<view class="inputIndex">
				<view v-for="(item,index) in info" :key="index" class="codeIndx">
					{{item}}
				</view>	
			</view>
		</view>
		<view class="btn" :class="pswText.length == 4 ? 'btnActive':''" @click="btnAddAddr">
			{{msgDict.confirm}}
		</view>
	</view>
</template>

<script>
	import {schoolInfo} from '../../api/index.js'
	export default {
		data() {
			return {
				info:['','','',''],
				pswFocus:false,
				pswText:'',
				msgDict:{}
			}
		},
		onLoad() {
			this.pswFocus =true
			this.msgDict = getApp().globalData.$t('loginTwo');
		},
		
		methods: {
			async NewsendSms(schoolCode){
				// console.log('手机号码',schoolCode)
			  	try{
					
					let {result} = await schoolInfo({schoolCode:schoolCode});
					
					uni.navigateTo({
						url:'../loginTwoInfutDetail/loginTwoInfutDetail?type=input&item=' + encodeURIComponent(JSON.stringify(result))
					})
				
					
					
					
				} catch(err) {
					console.log('我请求啦',err);
					uni.showToast({
						title:err.message,
						icon:'none'
					})
				}
			},
			toSetting(){
				uni.navigateBack({
					delta:1
				})
			},
			changePsw(e){
				let value=e.detail.value;
				this.pswText=value;
				let arr=['','','','','',''];
				let num=[...value.split(''),...arr];
				this.info=num.splice(0,4);
				
				
			},
			cancelFocus(){
				console.log('我调用了，取消')
				this.pswFocus=false;
			},
			getpswFocus(){
				
				this.pswFocus=true;
			},
			btnAddAddr(){
				
			    
				let schoolCode = this.pswText;
				if (schoolCode.length == 4) {
					this.NewsendSms(schoolCode);
				
				}
			}
			
		}
	}
</script>

<style>
    .user-info {
		// width: 100%;
		height: 150rpx;
		background-color: #fff;
		padding: 20rpx;
	}
	.topView{
		
		/* #ifdef APP-PLUS */
	    padding-top: calc(22upx + var(--status-bar-height));
		/* #endif */
		/*#ifdef MP-WEIXIN */
		padding-top: calc(22upx + var(--status-bar-height));
		/* #endif */
		/*#ifdef H5 */
		padding-top: calc(48upx + var(--status-bar-height));
		/* #endif */
		display: flex;
		justify-content: space-between;
	}
	.setIcon{
		width: 60rpx;
		height: 60rpx;
	}
	.lab2{
		display: flex;
		align-items: center;
		font-size: 28upx;
		color: #888;
		
	}
	.Name{
		color: #000;
		font-size: 38rpx;
		margin-top: 30rpx;
		font-weight: 400;
		text-align: center;
	}
	.btn{
		   color: #fff;
		   background-color: #808080;
		   height: 80rpx;
		   line-height: 80rpx;
		   border-radius: 40rpx;
		    /* margin-top: 30rpx; */
		   margin: 60rpx 40rpx;
		   font-size: 32rpx;
		   text-align: center;
		   
	   }
	   .btnActive{
		  background: linear-gradient(135deg, #2D63F9 0%, #6421D3 100%);
		  box-shadow: 0px 2px 24px 0px rgba(80, 58, 225, 0.36);
	   }
	   .inputPsw{
		   margin-top: 60rpx;
		   position: relative;
		   height: 170rpx;
	   }
	   .inputPsw input{
		   
		 position: absolute;
		 top: 10upx;
		 left: 20rpx;
	   	 width: 710rpx;
	   	 height: 120rpx;
	   	 color: #fff;
	   	 font-size: 2rpx;
	   	 caret-color:#fff;
		 /* margin-top: 30rpx; */
		 opacity: 0;
	   	 /* background-color: #007AFF; */
	   }
	   .inputIndex{
		   
	   	 margin-left: 30rpx;
		 width: 710rpx;
	   	 display: flex;
		 justify-content: space-around;
		
	   	 
	   }
	   .codeIndx{
	   	 width: 120rpx;
	   	 height: 140rpx;
	   	 /* margin-right:20upx; */
		 border-radius: 20rpx;
	   	 text-align: center;
		 background-color: #f2f2f2;
	   	 /* border-bottom: 2upx solid #DCDCDC; */
	   	 font-weight: bold;
	   	 font-size:80upx;
	   	 line-height: 140rpx;
		 
	   }
</style>
